import React, { Component } from "react";
import { NavBar, Icon, SearchBar } from "antd-mobile"
import axios from "axios"
import "./SearchCenter.css";
import { widthRouter, withRouter } from "react-router-dom"
class SearchCenter extends Component {
	state = {
		inputValue: "",
		productList: []
	}
	getProductList = (params) => {
		console.log("获取产品列表")
		axios.get("https://www.linweiqin.cn/api/public/v1/goods/qsearch", {
			params: {
				query: this.state.inputValue
			}
		}).then(res => {

			console.log(res)
			this.setState({
				productList: res.data.message
			})
		})
	}
	handleItemClick = (e) => {
		var goods_id = e.target.getAttribute("data-goods_id")
		this.props.history.push("/goodDetail/" + goods_id)
	}
	componentDidMount() {

	}
	render() {
		return <div className="yg-sc">
			<NavBar
				className="yg-sc-nav"
				mode="light"
				icon={<Icon type="left" />}
				onLeftClick={() => window.history.go(-1)}
			>搜索中心</NavBar>
			<SearchBar
				placeholder="Search"
				showCancelButton
				cancelText="搜索"
				value={this.state.inputValue}
				onSubmit={value => console.log(value, 'onSubmit')}
				onCancel={() => this.getProductList()}
				onChange={(value) => {
					console.log(value)
					this.setState({
						inputValue: value
					})
				}}
			/>

			<div className="yg-sc-list" onClick={this.handleItemClick}>
				{
					this.state.productList.map(v => {
						return <div className="sc-list-item" key={v.goods_id}
							data-goods_id={v.goods_id}>
							{v.goods_name}
						</div>
					})
				}
			</div>
		</div>;
	}
}
export default withRouter(SearchCenter)